<script lang="ts" setup>
import { categoryList, getQuery } from '@/common/utils';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const handelClick = (nav) => {
  const query = getQuery(`/games/${nav}`);
  if (route.name === 'Games' && route.path === query.path) {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
    return;
  }
  router.push(query);
};
</script>
<template>
  <div class="game-menus">
    <div class="category-header">
      <van-icon name="apps-o" />
      <span>Game Categories</span>
    </div>
    <div class="category-list">
      <div
        class="nav-item"
        :style="{ backgroundImage: `url('/nav_icon2/${item}.webp')` }"
        v-for="item in categoryList"
        :key="item"
        @click="handelClick(item)"
      >
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.game-menus {
  margin-bottom: 40px;

  .category-header {
    padding: 4px 14px;
    margin-bottom: 5px;
    background: linear-gradient(to right, rgb(70, 191, 50, 1), rgba(255, 213, 52, 0));
    font-size: 16px;

    .van-icon {
      margin-right: 8px;
    }
  }

  .category-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 10px;
    padding: 14px;

    .nav-item {
      position: relative;
      min-height: 80px;
      border-radius: 14px;
      background: url('/nav_icon2/Puzzle.webp') no-repeat center/100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(152, 19, 160, 1), rgba(152, 19, 160, 0));
      }

      &:nth-of-type(2)::after,
      &:nth-of-type(7)::after {
        background: linear-gradient(to top, rgba(52, 114, 255, 1), rgba(52, 114, 255, 0));
      }

      &:nth-of-type(3)::after,
      &:nth-of-type(8)::after {
        background: linear-gradient(to top, rgba(255, 213, 52, 1), rgba(255, 213, 52, 0));
      }

      &:nth-of-type(4)::after,
      &:nth-of-type(9)::after,
      &:nth-of-type(10)::after {
        background: linear-gradient(to top, rgba(236, 39, 124, 1), rgba(236, 39, 124, 0));
      }

      &:nth-of-type(5)::after {
        background: linear-gradient(to top, rgba(108, 191, 42, 1), rgba(108, 191, 42, 0));
      }

      &:nth-of-type(3) {
        grid-row: span 2;
        grid-column: span 2;

        span {
          font-size: 16px;
          bottom: 8px;
        }
      }

      span {
        position: relative;
        bottom: 4px;
        z-index: 2;
        font-size: 13px;
      }
    }
  }
}
</style>
